<template>
	<view class="container">
		<view class="empty_box" :style="'margin-top:' + tip_m_t + 'px;'" v-if="loading == false && coupon_list.length == 0">
			<view>{{ tip_txt }}</view>
		</view>
		<view class="coupon_list" v-if="loading == false && coupon_list.length > 0">
			<view class="not_use" :style="'color:' + mobile_head_color +';border-color:' + mobile_head_color" @tap="noUseCoupon"><lang keywords="不使用优惠券" chineseTxt="不使用优惠券"></lang></view>
			<block v-for="(item, coupon_list) in coupon_list" :key="item.had_id">
				<view class="item cf" @tap="useCoupon" :data-coupon_id="item.had_id" :data-can_use="item.can_use">
					<view :class="'discount-info ' + ( item.can_use != 1 ? 'none' : '' )">
						<view class="fl">
							<block v-if="item.is_discount != 1">
								<text class="unit">{{currency}}</text>
								<text class="int">{{ item.int }}</text>
								<text class="float">.{{ item.float }}</text>
							</block>
							<block v-else>
								<text class="int">{{item.discount_value}}</text>
								<lang keywords="折" chineseTxt="折" :right="true"></lang>
							</block>
						</view>
						<view :class="'fr ' + (coupon_id == item.had_id ? 'select' : '')">
							<view class="box">
								<view class="title">
									<block v-if="item.order_money > 0">
										<lang keywords="满X1可用" :X1="item.order_money" :chineseTxt="'满'+ item.order_money +'元可用'" unit='yuan'></lang>
									</block>
									<block v-else><lang keywords="无使用门槛" chineseTxt="无使用门槛"></lang></block>
								</view>
								<view class="info">{{ item.time }}</view>
							</view>
						</view>
						<view class="select-icon" v-if="item.can_use == 1">
							<text class="iconfont icon-quan" v-show="coupon_id != item.had_id"></text>
							<text class="iconfont icon-gou" :style="'color:' + mobile_head_color" v-show="coupon_id == item.had_id"></text>
						</view>
					</view>
					<view class="no-use" v-if="item.can_use != 1 && item.can_use_info.length > 0">
						<text class="iconfont icon-tanhao"></text>
						<view>
							<view class="reason" v-for="(reason, index) in item.can_use_info" :key="index">{{reason}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import common from '../../utils/common.js';
var sysRes = {};
var rpxUnit = 0;
var app = getApp();

export default {
	data() {
		return {
			order_id: 0,
			order_type: '',
			coupon_type: '',
			coupon_list: [],
			tip_txt: '',
			tip_m_t: 200,
			loading: true,
			coupon_id: 0,
			mobile_head_color: '',
			config: '',
			currency: '¥',
			tmp_order_id: ''
		};
	},
	onReady: function() {
		// 页面渲染完成
		sysRes = wx.getSystemInfoSync();
		rpxUnit = sysRes.windowWidth / 750;
		this.tip_m_t = (sysRes.windowWidth - 230 * rpxUnit) / 2;
	},
	onLoad: function(options) {
		common.setMainColor(this);
		console.log(options);
		this.temp_order_id = options.temp_order_id
		this.order_id = options.order_id;
		this.order_type = options.type;
		this.coupon_type = options.coupon_type;
		this.coupon_id = options.coupon_id;
		this.tip_txt = common.changeTxt('暂无' + (options.coupon_type == 'mer' ? '商家' : '平台') + '优惠券');
		wx.setNavigationBarTitle({
			title: common.changeTxt('选择' + (options.coupon_type == 'mer' ? '商家' : '平台') + '优惠券')
		});
		wx.showNavigationBarLoading();
		var postData = {
			order_id: options.order_id,
			type: options.type,
			coupon_type: options.coupon_type,
			temp_order_id: options.temp_order_id
		};
		common.post('My&a=coupon_list', postData, 'getCouponList', this);
		common.changeCurrency(this)
	},

	methods: {
		getCouponList: function(result) {
			for (var i in result) {
				result[i].order_money = parseFloat(result[i].order_money);
				var tmpArr = result[i].discount.split('.');
				result[i].int = tmpArr[0];
				result[i].float = tmpArr[1] ? tmpArr[1] : '0';
			}
			console.log(result);
			wx.hideNavigationBarLoading();
			this.loading = false;
			this.coupon_list = result;
			wx.hideToast();
		},
		noUseCoupon: function(e) {
			wx.setStorageSync('coupon_action', 'not');
			wx.setStorageSync('coupon_type', this.coupon_type);
			common.navigateBack();
		},
		useCoupon: function(e) {
			var that = this;
			let can_use = e.currentTarget.dataset.can_use
			if (can_use != 1) {
				return
			}
			this.coupon_id = e.currentTarget.dataset.coupon_id;
			
			setTimeout(function() {
				wx.setStorageSync('coupon_action', 'use');
				wx.setStorageSync('coupon_id', e.currentTarget.dataset.coupon_id);
				wx.setStorageSync('coupon_type', that.coupon_type);
				common.navigateBack();
			}, 50);
		}
	}

};
</script>
<style scoped>
.empty_box {
	background: url(https://hf.pigcms.com/static/images/house/no_data.png) no-repeat;
	background-size: 200rpx;
	background-position: top center;
	padding-top: 200rpx;
	color: #a3a3a3;
	text-align: center;
}
.coupon_list {
	padding: 26rpx 20rpx;
	background: #f8f8f8;
}
.not_use {
	border: 2rpx solid #06c1ae;
	color: #06c1ae;
	padding: 16rpx 0;
	text-align: center;
}
.item {
	margin-top: 26rpx;
	position: relative;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.08);
	background: #fff;
	border-radius: 10rpx;
}
.discount-info{
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	height: 70px;
}


.item .fl {
	width: 30%;
	text-align: center;
	color: red;
}
.item .fr {
	width: 70%;
	position: relative;
}
.item .fr.none:after {
	position: absolute;
	content: '';
	display: block;
	width: 60rpx;
	height: 60rpx;
	top: 50%;
	margin-top: -30rpx;
	right: 30rpx;
	background: url(https://hf.pigcms.com/static/wxapp/coupon_uncheck.png) no-repeat;
	background-size: 100%;
}
.item .fr.select:after {
	background-image: url(https://hf.pigcms.com/static/wxapp/coupon_check.png);
}
.unit {
	font-size: 24rpx;
}
.int {
	font-size: 30px;
	font-weight: bold;
}
.float {
	font-size: 28rpx;
}
.box {
	margin-left: 40rpx;
}
.title {
	font-size: 36rpx;
}
.info {
	color: #666;
	margin-top: 16rpx;
}

.discount-info.none{
	opacity: 0.2;
}
.discount-info.none .fl{
	color: #333;
}

.select-icon .iconfont{
	font-size: 52rpx;
	color: #bbb;
	padding: 0 30rpx;
}
.no-use{
	border-top: 1px dashed #e5e5e5;
	margin:0 40rpx;
	padding: 20rpx 0;
	display: flex;
	font-size: 12px;
	color: #333;
}
.no-use .reason{
	line-height: 2;
	margin-left: 10rpx;
}
.no-use .iconfont{
	color: red;
}
</style>